<template>
  <div class="view-fill">
    <div class="app-container-flex">
      <full-screen
        v-model="showDialog"
        title="关联人员"
        :need-return="false"
        :btn-list="fullInfo.btnList"
      >
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body" style="padding: 10px 0px 13px 0px">
            <basic-information
              :info="infoList"
              :rules="infoList.rules"
              v-model:ref-obj="infoList.ref"
            >
            </basic-information>
          </div>
        </div>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>人员列表</p>
          </div>
          <div class="model-panel-body">
            <!-- 条件栏 -->
            <page-filter
              v-model:query="filterInfo.query"
              :filter-list="filterInfo.list"
            >
              <template v-slot:filter-delUser>
                <el-button
                  @click="delUser"
                  :disabled="!tableInfo.selections.length"
                  >删除人员</el-button
                >
              </template>
            </page-filter>
            <el-form ref="tableForm" :model="tableInfo" style="width: 100%">
              <page-table
                :refresh="tableInfo.refresh"
                :init-curpage="tableInfo.initCurpage"
                v-model:data="tableInfo.data"
                :api="getRrgUserList"
                :pager="true"
                :checkBox="true"
                :tabIndex="true"
                :query="filterInfo.query"
                :field-list="tableInfo.fieldList"
                :handle="tableInfo.handle"
                @handleEvent="handleEvent"
              >
                <template v-slot:col-name="scope">
                  <span class="slip-edit" @click="showDetail(scope.row)">{{
                    scope.row.name
                  }}</span>
                </template>
              </page-table>
            </el-form>
          </div>
        </div>

        <!-- 产品弹窗 -->
        <selectUserForRole
          v-if="productInfo.visible"
          :query="productInfo.query"
          v-model:show-dialog="productInfo.visible"
          :roleId="tableRow.id"
          @callback="selectProduct"
        />
      </full-screen>
    </div>
  </div>
</template>

<script setup name="roleAddUser">
import { getRrgUserList } from '@/api/base.js'
import {
  batchUpdateByRole,
  deleteByRole,
  batchDeleteUserByRole,
} from '@/api/mapping.js'
import SelectUserForRole from '@/components/SelectUsers/selectUserForRole'
const emit = defineEmits()
const { proxy } = getCurrentInstance()
const props = defineProps({
  tableRow: {
    type: Object,
    defaule: {},
  },
  visible: {
    type: Boolean,
    default: false,
  },
})
//  getRrgUserList,
const infoList = ref({
  ref: null,
  data: props.tableRow,
  fieldList: [
    { label: '角色名称', value: 'name', type: 'text' },
    { label: '角色编码', value: 'code', type: 'text' },
  ],
  rules: {},
})
// 过滤相关配置
const filterInfo = ref({
  query: {
    roleId: props.tableRow.id,
    filterHospitalAdmin:1
  },
  list: [
    {
      type: 'button',
      label: '添加人员',
      event: addProduct,
    },
    {
      type: 'slot',
      label: '删除人员',
      value: 'delUser',
    },
    {
      type: 'input',
      label: '名称',
      value: 'nameLike',
      event: search,
    },
    { type: 'button', label: '搜索', event: search },
  ],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  selections: [],
  fieldList: [
    { label: '工号', value: 'userName' },
    { label: '名称', value: 'name', type: 'slot' },
    {
      label: '部门',
      value: 'deptName',
    },
    { label: '性别', value: 'sexValue' },
  ],
})

const fullInfo = ref({
  btnList: [{ label: '返回', event: returnBack, show: true }],
})
//产品弹窗相关
const productInfo = ref({
  query: {
    filterHospitalAdmin:1
  },
  visible: false,
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emit('update:visible', newValue) // 更新父组件visible
  },
})
const canRemoveProduct = computed(() => {
  return tableInfo.value.selections.length
})
onMounted(() => {
  proxy.$nextTick(() => {
    getList()
  })
})
function returnBack() {
  showDialog.value = false
  emit('returnBack')
}
function showDetail(row) {
  let params
  if (row.id) {
    params = {
      fromType: 'user',
      userId: row.id,
    }
    proxy.$router.push({
      name: 'user',
      params,
    })
  }
}
// 获取列表
function getList() {
  proxy.$nextTick(() => {
    tableInfo.value.refresh = Math.random()
  })
}

// 搜索
function search() {
  // 重置分页
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}

// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.value.selections = data
      break
  }
}
//删除人员
function delUser() {
  let ids = tableInfo.value.selections.map((item) => {
    return {
      userId: item.id,
      roleId: props.tableRow.id,
    }
  })
  proxy
    .$confirm('删除后将改变数据,是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      batchDeleteUserByRole(ids).then((res) => {
        if (res && res.success) {
          getList()
        }
      })
    })
}
//添加人员按钮
function addProduct() {
  productInfo.value.visible = true
}
//选择人员回调
function selectProduct(data = []) {
  let arr = []
  if (data && data.length) {
    data.forEach((item) => {
      arr.push({
        userId: item.id,
        roleId: props.tableRow.id,
      })
    })
  }
  save(arr)
}
function save(data) {
  if (data && data.length) {
    proxy.$refs['tableForm'].validate((valid) => {
      if (valid) {
        if (!data || !data.length) {
          return
        }
        batchUpdateByRole(data).then((resp) => {
          if (resp && resp.success) {
            getList()
          }
        })
      }
    })
  } else {
    deleteByRole({ roleId: props.tableRow.id }).then((resp) => {
      if (resp && resp.success) {
        getList()
      }
    })
  }
}
</script>

<style scoped>
.model-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
